<script setup lang="ts">
import * as DevicesResponse from "./class/DevicesResponse";
import axios, {create} from "axios";
import config from "./assets/config.json";
import {defineAsyncComponent, onBeforeMount, onMounted, computed, ref, onBeforeUpdate, watch, reactive} from "vue";
import { useStore } from "vuex";
import GlobalSettings from "./components/GlobalSettings.vue";
import HelpPage from "./components/HelpPage.vue";


// let devices = reactive<DevicesResponse.Device[]>([]);
// let currDevice = ref(new DevicesResponse.Device);

const loaded = ref(false);

const DeviceInterface = defineAsyncComponent(() => import('./components/DeviceInterface.vue'));

const store = useStore();
const devicesStored = computed(() => store.getters["Devices/getDevices"]);
const currDeviceStored = computed(() => store.getters["Devices/getCurrDevice"]);
const devices = reactive<DevicesResponse.Device[]>([])
const currDevice = reactive({ device: new DevicesResponse.Device() })
const currPage = ref("page_monitor")
const updateDevicesList = (newDevices: DevicesResponse.Device[]) => {
  store.commit("Devices/updateDevicesList", newDevices);
}
const switchCurrDevice = (deviceIndex: Number) => {
  store.commit("Devices/switchFocusDevice", deviceIndex);
}

watch(devicesStored, (devicesStored) => {
  for (let ds of devicesStored) {
    devices.push(ds);
  }
  loaded.value = true;
});

watch(currDeviceStored, (currDeviceStored) => {
  currDevice.device = currDeviceStored;
})

onBeforeMount(() => {

  axios({
    baseURL: `http://${config.host}:${config.port}`,
    method: "GET",
    url: `${config.apiPrefix}/${config.apiSuffix.updateDevices}`
  });

  getDeviceList().then(devs => {
    // devices = devs;
    updateDevicesList(devs)
    // 默认显示的是第一个设备，即当前设备为currDevice = devices.value[0]
    switchCurrDevice(0);

  }).catch(err => console.log(err));

});

function getDeviceList() : Promise<DevicesResponse.Device[]> {
  return new Promise<DevicesResponse.Device[]>((resolve, reject) => {
    axios({
      baseURL: `http://${config.host}:${config.port}`,
      method: "GET",
      url: `${config.apiPrefix}/${config.apiSuffix.getDevices}`,
    }).then(response => {
      if (response.status == 200 && response.data.status == "success" && response.data.devices.length > 0) {
        resolve(response.data.devices);
      } else {
        throw Error("status is not success.");
      }
    }).catch(function (error) {
      reject(error);
    });
  });
}

function deviceSelectionChange(e: any) {
  for (let i = 0; i < devices.length; i++) {
    const dev = devices[i];
    if (dev.device_number == e) {
      // currDevice.value = dev
      switchCurrDevice(i);
    }
  }
}

</script>


<template>
  <t-layout>
<!--页面头部-->
    <t-header style="border-bottom: #eeeeee 1px solid">
      <t-head-menu :value="currPage" height="120px">
        <template #logo>
          <h2 style="color: #0052d9; margin-inline: 20px">可燃气体回收装置-数据可视化平台</h2>
        </template>
        <t-menu-item value="page_monitor" @click="currPage='page_monitor'"> 监控平台 </t-menu-item>
        <t-menu-item value="page_global_settings" @click="currPage='page_global_settings'"> 全局设置 </t-menu-item>
        <t-menu-item value="page_help" @click="currPage='page_help'"> 帮助 </t-menu-item>
      </t-head-menu>
    </t-header>
    <t-layout v-if="loaded && currPage === 'page_monitor'">
      <t-aside style="border-top: 1px solid var(--component-border)">
        <t-menu theme="light" :value="currDevice.device.device_number" @change="deviceSelectionChange($event)" style="margin-right: 50px" height="550px">
          <t-menu-item v-for="dev in devices" :value="dev.device_number" :key="dev.device_number">
            {{ dev.name }}
          </t-menu-item>
        </t-menu>
      </t-aside>
      <t-content style="background-color: white">
        <DeviceInterface
            style="background-color: white; "
            :key="currDevice.device.device_number"
            :device-number="currDevice.device.device_number"
            :data-tag1="currDevice.device.dimensions[0]"
            :data-tag2="currDevice.device.dimensions[1]" />
      </t-content>
    </t-layout>
    <t-layout v-else-if="loaded && currPage === 'page_global_settings'" style="background-color: white">
      <GlobalSettings/>
    </t-layout>
    <t-layout v-else-if="loaded && currPage === 'page_help'" style="background-color: white">
      <HelpPage/>
    </t-layout>
    <t-layout style="height: 100px; background: white" v-else>
      <t-loading style="top: 100px"/>
    </t-layout>
  </t-layout>

</template>

<style scoped>
html, body {
  height: 100%;
  width: 100%;
}
</style>